<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>
<body>
    <div id='app'>
        <!-- .prevent 阻止默认事件 -->
        <button @contextmenu.prevent = ''>你右键点击一下</button>
        <!-- .stop 阻止冒泡 -->
        <div @click = 'fn1'>
            ppppppp
            <div @click.stop = 'fn2'>kkkkkkk</div>
        </div>
        <!-- .capture 把事件传播方式改为捕获 -->
        <div @click.capture = 'fn1'>
            ppppppp
            <div @click= 'fn2'>kkkkkkk</div>
        </div>
        <!-- .self 当事件被触发的时候e.target是否是自身，如果是会被触发，如果不是不会触发 -->
        <div @click.self = 'fn1'>
            ppppppp
            <div @click= 'fn2'>kkkkkkk</div>
        </div>
        <!-- .13是触发回车的按键触发 -->
        <input type="text" @keyup.13 = "fn1">
        <br>
        <!-- .enter 也是触发回车 -->
        <input type="text" @keyup.enter = "fn2">
        <br>
        <!-- .delete 是删除按键触发 -->
        <input type="text" @keyup.delete = "fn2">
        <br>
        <!-- .esc 是Esc键触发 -->
        <input type="text" @keyup.esc = 'fn1'>
        <br>
        <!-- .tab是换行键触发 -->
        <input type="text" @keydown.tab = 'fn1'>
    </div>

    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el : '#app',
            data(){
                return {
                    msg : 'Hello Vue'
                }
            },
            methods:{
                fn1(){
                    console.log(11111);
                },
                fn2(){
                    console.log(22222);
                }
            }
        })
    </script>
</body>
</html>